<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="<?php echo base_url();?>assets/jquery_upload_cropv1.2/js/jquery-pack.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>assets/jquery_upload_cropv1.2/js/jquery.imgareaselect.min.js"></script>
	<?if(isset($upload_success) && $upload_success =='yes'){?>
	
<script type="text/javascript">
function preview(img, selection) { 
	var scaleX = <?php echo $thumb_width;?> / selection.width; 
	var scaleY = <?php echo $thumb_height;?> / selection.height; 
	
	$('#thumbnail + div > img').css({ 
		width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
		height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
	});
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
} 

$(document).ready(function () { 
	$('#save_thumb').click(function() {
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("You must make a selection first");
			return false;
		}else{
			return true;
		}
	});
}); 

$(window).load(function () { 
	$('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
});

</script>
</head>
<?} 
if(isset($upload_success) && $upload_success=='yes'){?>
		<h2>Create Thumbnail</h2>
		<div align="center">
			<img src="<?php echo base_url().''.$large_image_location;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
			<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
				<img src="<?php echo base_url().''.$large_image_location;?>" style="position: relative;" alt="Thumbnail Preview" />
			</div>
			<br style="clear:both;"/>
			<?
				echo form_open_multipart($url);
			?>
				<input type="hidden" name="x1" value="" id="x1" />
				<input type="hidden" name="y1" value="" id="y1" />
				<input type="hidden" name="x2" value="" id="x2" />
				<input type="hidden" name="y2" value="" id="y2" />
				<input type="hidden" name="w" value="" id="w" />
				<input type="hidden" name="h" value="" id="h" />
				<input type="hidden" name="tp" value="<?=$thumbnail_prefix;?>" id="tw" />
				<input type="hidden" name="tw" value="<?=$thumb_width;?>" id="tw" />
				<input type="hidden" name="th" value="<?=$thumb_height;?>" id="th" />
				<input type="hidden" name="lw" value="<?=$current_large_image_width; ?>" id="lw" />
				<input type="hidden" name="lh" value="<?=$current_large_image_height; ?>" id="lh" />
				<input type="hidden" name="main_image" value="<? echo $large_image_location;?>" />
				<input type="hidden" name="main_image_id" value="<? echo $id; ?>" />
				
				<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
			</form>
		</div>
	<hr />
	<?php 	}
	
?>
</html>